
import React from "react";
class TableList extends React.Component {
    constructor(prop) {
        super(prop)
        this.state = {
            tableCannel: 0,
            arr1: [
                { goodsName: "电脑", stock: 100 },
                { goodsName: "手机", stock: 50 },
                { goodsName: "平板", stock: 200 }
            ],
            arr2: [
                { goodsName: "xxx电脑", price: "10000" },
                { goodsName: "xxx手机", price: "5000" },
                { goodsName: "xxx平板", price: "20000" }
            ]
        }
    }
    showArr1() {
        let content =
            <div>
                {
                    this.state.arr1.map((item) => {
                        return <div key={item.goodsName}>
                            <span>{item.goodsName}</span>
                            <span>{item.stock}</span>
                        </div>

                    })
                }
            </div>
        return content;
    }
    showArr2() {
        let content =
            <div >
                {
                    this.state.arr2.map(item => {
                        return <div key={item.goodsName}>
                            <span>{item.goodsName}</span>
                            <span>{item.price}</span>
                            <button onClick={this.deleteArr2Item.bind(this, item.goodsName)}>删除</button>
                        </div>

                    })
                }
            </div>
        return content;
    }
    changeTableCannel(num) {
        this.setState({
            tableCannel: num
        })
    }
    showRender() {
        return this.state.tableCannel === 0 ? this.showArr1() : this.showArr2()
    }
    deleteArr2Item(goodsName) {
        let newArr = this.state.arr2.filter((item) => {
            return item.goodsName !== goodsName
        })
        this.setState({
            arr2: newArr
        })
    }
    addStockItem() {

    }
    render() {
        return (
            <div>
                <button>添加库存</button>
                <button onClick={this.changeTableCannel.bind(this, 0)}>库存</button>
                <button onClick={this.changeTableCannel.bind(this, 1)}>商品</button>
                {
                    this.showRender()
                }
            </div>
        )
    }
}
export default TableList;